<script setup lang="ts">
import { ref, nextTick, reactive, onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router';
const init = ref(false);
const options = reactive({
    width: "100%", //播放器高度
    height: "100vh",
    color: "#409eff", //主题色
    title: "", //视频名称
    src: "", //视频源
    type: "m3u8", //视频类型
    muted: false, //静音
    webFullScreen: false,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: false, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    poster:"https://img0.baidu.com/it/u=142904645,1460086923&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
    controlBtns: [
        "audioTrack",
        "quality",
        "speedRate",
        "volume",
        "setting",
        "pip",
        "pageFullScreen",
        "fullScreen",
    ], //显示所有按钮,
});

const route = useRoute()
const router = useRouter()


const videoUrl = ref()
const name = ref()
const id = ref()
const imgList = [
    "https://img0.baidu.com/it/u=142904645,1460086923&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
    "https://img2.baidu.com/it/u=1360609718,2509596790&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
    "https://img1.baidu.com/it/u=1509266289,3840456975&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    "https://img2.baidu.com/it/u=1669072907,1400778884&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
]
onActivated(() => {
    init.value = false;
    videoUrl.value = route.query.videoUrl
    name.value = route.query.name
    id.value = route.params.id
    options.src = videoUrl.value;
    options.poster = imgList[Math.floor(Math.random()*4)];
    nextTick(() => {
        init.value = true;
    })
    console.log(videoUrl.value, name.value, id.value);
})

const video = ref<HTMLVideoElement>();
// class ThumbsUpAni {
//     context:object
//     width:number
//     height:number
//     constructor() {
//         const canvas = document.getElementById('thumsCanvas') as HTMLCanvasElement;
//         this.context = canvas.getContext('2d')!;
//         this.width = canvas.width;
//         this.height = canvas.height;
//     }
// }
const all = ref<HTMLDivElement>();
interface myEvent extends MouseEvent{
    path:Array<Element>
}
const cloneSvg = (evt:MouseEvent)=>{
    let e = evt as myEvent;
    let path = e.path;
    console.log(path);
    let target:HTMLDivElement;
    for(let i=0;i<path.length;i++){
        if(/img-box/g.test(path[i].classList.toString())){
            target = path[i] as HTMLDivElement;
            break;
        }
    }
    let node = target!.cloneNode(true) as HTMLDivElement;
    console.log(node);
    node.classList.add("animate__animated","animate__fadeOutUp");
    all.value?.appendChild(node);
    nextTick(()=>{
        setTimeout(()=>{
            node.remove();
        },1000)
    })
}
</script>


<template>
    <div class="fixed-zbest live-broadcast" :ref="el=>(all=el as HTMLDivElement)">
        <header class="header">
            <van-icon @click.stop="router.go(-1)" class="icon" name="cross" />
        </header>
        <vue3VideoPlay v-if="init" :ref="(el: HTMLVideoElement) => video = (el as HTMLVideoElement)" v-bind="options"/>
        <div class="img-box" @click.stop="cloneSvg">
            <svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"></path></svg>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.live-broadcast {
    width: 100%;
    overflow: scroll;
    background-color: var(--bgc-gray);

    &::-webkit-scrollbar {
        display: none;
    }

    .header {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: .5rem;
        box-sizing: border-box;
        font-size: .2rem;
        line-height: .5rem;
        padding: 0 .15rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .icon {
            color: var(--text-white);
            opacity: .8;
            font-size: .2rem;
        }

        .header-icon {
            font-size: .15rem;
        }

        .header-text {
            flex-grow: 1;
            font-size: .18rem;
            text-align: center;
        }
    }

    .img-box {
        position: absolute;
        right: .2rem;
        bottom: 1rem;
        z-index: 10;
        svg,path{
            fill:var(--text-yellow);
            opacity: .8;
        }
    }
}
</style>